<template>

  <div class="about">

    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入比赛名称" suffix-icon="el-icon-search" v-model="contestName"></el-input>
      <el-input style="width: 200px" placeholder="请输入比赛类型" suffix-icon="el-icon-message" class="ml-5" v-model="contestType"></el-input>
      <el-button class="ml-5" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <!--表单数据-->
    <!--border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange"-->
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  >
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="contestName" label="竞赛名称"></el-table-column>
      <el-table-column prop="organizer" label="主办单位" ></el-table-column>
      <el-table-column prop="contestType" label="竞赛类别" ></el-table-column>
      <el-table-column prop="year" label="年份"></el-table-column>
      <!--上传、查看操作-->
      <el-table-column label="操作"  width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="submitOpen(scope.row)">添加<i class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="success" @click="handleView(scope.row)">查看 </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        height="auto"
        :before-close="dialogClose">
      <el-descriptions class="description" title="详细" :column="2" :size="size" border>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-trophy"></i>
            竞赛名称
          </template>
          <span>{{this.contestInfo.contestName}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-medal"></i>
            竞赛类型
          </template>
          <el-tag size="small">{{this.contestInfo.contestType}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-timer"></i>
            主办单位
          </template>
          <span>{{this.contestInfo.organizer}}</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-timer"></i>
           年份
          </template>
          <span>{{this.contestInfo.year}}</span>
        </el-descriptions-item>

      </el-descriptions>

    </el-dialog>

    <!--页码部分-->
    <!--<div style="padding: 10px 0">-->
    <div style="padding: 10px 0">
      <span class="demonstration"></span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


    <div>
        <el-dialog
            title="信息填入"
            :visible.sync="submit"
            :width="dialogWidth"
            height="auto"
            :before-close="submitClose">

        <div style="margin-bottom: 20px">
          <el-form ref="teamForm" label-width="80px" size="small" style="display: flex">
            <div style="width: 50%">

              <el-form-item  label="竞赛名称">
                <el-input  disabled v-model="form.contestName" autocomplete="off"  oninput="value=value.replace(/[^0-9.]/g,'')" ></el-input>
              </el-form-item>
              <el-form-item label="项目名称">
                <el-input v-model="form.projectName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="主办单位">
                <el-input disabled v-model="form.organizer" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="获奖级别">
                <el-tooltip effect="dark" content="格式:一等奖,二等奖.." placement="top-start">
                <el-input   v-model="form.priceLevel" autocomplete="off"></el-input>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="第一指导老师姓名">
                <el-input v-model="form.teamGuider" autocomplete="off" style="margin-top: 20px"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.teamGuiderPhone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工号" style="margin-left:-30px">
                <el-input v-model="form.teamGuiderId" autocomplete="off" style="width: 92%;margin-left: 30px" ></el-input>
              </el-form-item>
              <el-form-item label="工资发放工行账号">
                <el-input v-model="form.cardNumber" autocomplete="off" style="margin-top: 20px"></el-input>
              </el-form-item>
              <el-form-item label="年份" style="margin-left:-30px">
                <el-input  disabled v-model="form.year" autocomplete="off"  style="width: 92%;margin-left: 30px"></el-input>
              </el-form-item>

            </div>

            <div style="width: 50%">
              <el-form-item label="负责人姓名" label-width="100px">
                <el-input v-model="form.teamLeaderName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="负责人学号" label-width="100px">
                <el-input v-model="form.teamLeaderId" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" label-width="100px" style="margin-left: -10px">
                <el-input v-model="form.teamLeaderPhone" autocomplete="off" style="width: 97%;margin-left: 10px"></el-input>
              </el-form-item>
              <el-form-item label="班级" label-width="100px" style="margin-left: -30px" >
                <el-input v-model="form.teamLeaderClass" autocomplete="off" style="margin-left:30px;width:92%;"></el-input>
              </el-form-item>
              <el-form-item label="学费扣费工行账号">
                <el-input v-model="form.teamLeaderCardNumber" autocomplete="off" style="margin-top: 20px;width:94%;margin-left: 20px"></el-input>
              </el-form-item>
              <el-form-item label="开户行信息" label-width="100px">
                <el-input v-model="form.bankingDetails" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证号码" label-width="100px">
                <el-input v-model="form.teamLeaderCode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="学生奖金比例%">
                <el-input v-model="form.studentBonuses" autocomplete="off" style="margin-top: 20px;width:94%;margin-left: 20px"></el-input>
              </el-form-item>
              <el-form-item label="团队其他成员名称" >
                <el-tooltip effect="dark" content="成员名称之间用 、分隔" placement="top-start">
                  <el-input v-model="form.otherStudents" autocomplete="off"style="margin-top: 3px;width: 94%;margin-left: 20px"> </el-input>
                </el-tooltip>

              </el-form-item>
            </div>




          </el-form>
        </div>


          <span slot="footer" class="dialog-footer">
           <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="formSumit">确 定</el-button>
           </span>
        </el-dialog>
  </div>






    <el-dialog
        title="上传信息:"
        :visible.sync="sumbitFinish"
        width="50%"
        :before-close="FinishClose">
      <div style="display: flex">
        <el-upload :headers="{Authorization:JSON.parse(localStorage.getItem('user'))}" action="http://localhost:9090/Team/submitDoc" :show-file-list="false" accept=".docx,.pdf,image/*,.rar,.zip" :on-success="handleSuccess"
                   :on-error="handleError" :before-upload="handFileBefore" multiple  style="display: inline-block" :limit="5" :on-exceed="handleExceed" :data="dataID">
          <el-button type="primary" class="ml-5">上传附件 <i class="el-icon-top"></i></el-button>

        </el-upload>
      </div>


    </el-dialog>


  </div>
</template>

<script>
  export default {
    name:"CreateView",
    data(){

      return{
        dataID:{
         id:""
        },




        submitPic:false,
        localStorage: window.localStorage,
        sumbitFinish:false,
        isdisabled:false,
        originalForm:{},
        dialogVisible:false,
        total: 0,
        pageNum: 1,
        pageSize: 5,
        multipleSelection: [],
        headerBg: 'headerBg',
        tableData: [],
        contestName:"",
        contestType:"",
        button:"1",

        dialogWidth:"50",
        contestInfo: {
          id:"",
          contestName:"",
          contestType:"",
          organizer:"",
          year:"",


        },
        rules:
          {




          },


    // 初始宽度：
        widess:50,
        pngwidth:100,
    //需要一个算法，还要一个变量，用来算当人数为1的时候，自动调节宽度
        radio: '人数1',
      // 把数据包装成一个数组用
        temp:null,
        //这个参数是传进自动搜索信息
        propId:'',
        size: '',
        submit:false,
        uploadingFiles: [],//上传文件的列表
        form: {
          id:"",
          contestName:"",
          projectName:"",
          organizer:"",
          priceLevel:"",
          teamGuider:"",
          teamGuiderPhone:"",
          teamGuiderId:"",
          cardNumber:"",
          teamLeaderName:"",
          teamLeaderId:"",
          teamLeaderPhone:"",
          teamLeaderClass:"",
          teamLeaderCode:"",
          teamLeaderCardNumber:"",
          bankingDetails:"",
          studentBonuses:"",
          otherStudents:"",
          year:"",


        },



      }







    },
    created() {
      this.load()
    },
    methods: {

      formSumit(){
        const str=this.contestInfo.contestType
        // const type=str.replace("级","")
        this.form.priceLevel=(str + this.form.priceLevel)
        this.request.post("/admin/insertA",this.form).then(res=>{
          console.log(res)
              if (res.code==="200"){
                this.dataID.id=res.data
                this.$message.success("添加成功")
                this.submit = false


              }
        }).catch(error=>{
          this.$message.error("添加失败")
        })
      },
      PicClose(){
      this.submitPic=false;
      },
      clearForm() {


        this.form.projectName=""
        this.form.teamGuider=""
        this.form.teamGuiderPhone=""
        this.form.teamGuiderId=""
        this.form.priceLevel=""
        this.form.cardNumber=""
        this.form.teamLeaderName=""
        this.form.teamLeaderId=""
        this.form.teamLeaderPhone=""
        this.form.teamLeaderClass=""
        this.form.teamLeaderCode=""
        this.form.teamLeaderCardNumber=""
        this.form.bankingDetails=""
        this.form.studentBonuses=""
        this.form.otherStudents=""

      },




      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        console.log(pageNum)
        this.pageNum = pageNum
        this.load()
      },
      //点击查看得时候打开得窗口
      handleView(row) {
        this.contestInfo = row
        this.dialogVisible = true
      },
      dialogClose() {
        this.dialogVisible = false;
      },
      load() {
        this.request.get("/admin/contestinfo/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            contestName: this.contestName,
            contestType: this.contestType,
          }
        }).then(res => {
          console.log(res)

          this.tableData = res.data.records
          this.total = res.data.total

        })
      },
      reset() {
        this.contestName = ""
        this.contestType = ""
        this.load()
      },

      FinishClose(){
       this.sumbitFinish = false;
      },

      handleCancel() {
        this.submit = false;
        this.clearForm()


      },
      submitClose() {
        this.$confirm('确定关闭？', '提示', {
          confirmButtonText: '放弃',
          cancelButtonText: '关闭',
          type: 'warning'
        }).then(() => {
          this.submit = true

        }).catch(() => {
          this.submit = false
          this.clearForm()

        })

      },


      submitOpen(row) {
        this.contestInfo=row
        this.form = row

      // 打开后对表单的清除
        this.submit = true;





      },



      //文件上传
      handleSuccess(){
        this.$message.success("成功")
        this.dialogFormVisible = false;
        this.sumbitFinish = false;
        this.submit = false;
      },

      handFileBefore(file){
        if (!this.handBefore(file)){
          return false;
        }
        this.uploadingFiles.push(file);
        return  true;// 将文件加入正在上传列表
      },

      handBefore(file){
        const acceptfile = ['docx','pdf','png','jpg','rar','zip']
        const fileExtension = file.name.split('.').pop().toLowerCase();
        if (!acceptfile.includes(fileExtension)){
          this.$message.error("请上传符合格式得文件!")
          return false;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$message.error('文件大小不能超过 5MB');
          return false;
        }

        return true;
      },
      handleError(){
        this.$message.error("系统错误")
      },
      handleExceed(files){
        this.$message.warning("文件选择不能超过5个!")
      }




    }

  }



</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
